
media($class = '') {
	$class += '-' unless ($class == '');

	&col-{$class}0 {
		display: none;
	}

	for $span in 1 .. yoz_grid_col {
		$percent = (100 / yoz_grid_col * $span)%;

		&col-{$class}{$span} {
			width: $percent;
		}

		&col-{$class}ml_{$span} {
			margin-left: $percent;
		}

		&col-{$class}mr_{$span} {
			margin-right: $percent;
		}
	}
}

.{yoz_prefix} {
	for $name, $spacing in yoz_grid_gutter {
		&gutter-{$name} {
			[class*=\'{yoz_prefix}col-\'] {
				padding-left: $spacing;
				padding-right: $spacing;
			}
		}
	}

	&row {
		position: relative;
		box-sizing: border-box;

		&:before, &:after {
			content: ' ';
			clear: both;
			display: table;
		}

		[class*=\'{yoz_prefix}col-\'] {
			float: left;
			box-sizing: border-box;
		}
	}

	&row-flex {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		[class*=\'{yoz_prefix}col-\'] {
			box-sizing: border-box;
		}
	}

	media();

	for $k, $v in yoz_grid_query {
		@media screen and ({$v} ) {
			media($k);
		}
	}
}